import UTable from '@/components/UTable'
import { Button, Tag } from "antd";
import React from "react";
import "./index.less";

const columns = [
  {
    title: "文章标题",
    id: "title",
    key: "title",
    width:300
  },
  {
    title: "描述",
    id: "content",
    key: "content",
    width:500,
  },
  {
    title: "阅读量",
    id: "views",
    key: "views",
    width:300
  },
  {
    title:"分类",
    id:'catagory',
    key:'catagory',
  },
  {
    title: "标签",
    id: "tags",
    key: "tags",
    render: (tags) => (
      <span>
        {tags.map((tag) => {
          console.log(tag);
          let color = tag.length > 5 ? "geekblue" : "green";
          return (
            <Tag color={color} key={tag}>
              {tag}
            </Tag>
          );
        })}
      </span>
    ),
  },
];

const operations = [
  {
    key:'add',
    name:'新增',
    method:()=>{
      console.log('新增内容')
    }
  },
  {
    key:'delete',
    name:'删除',
    method:()=>{
      console.log('删除内容')
    }
  },
  {
    key:'update',
    name:'编辑',
    method:()=>{
      console.log('编辑内容')
    }
  }
]


const list = [
  {
    id: 1802000,
    title: "article",
    content: "文章标题",
    views: 155,
    tags: [],
  },
];

// 新增内容

const Blog = (props) => {

  const handleSelected = () => {
      console.log('选中了当前项')
  }
  return (
    <div className="page-container">
      <UTable 
        columnList={ columns } 
        operations={ operations } 
        dataSource={ list } 
        onSelected={ ()=> handleSelected() }/>
    </div>
  );
};

export default Blog;
